<template>
	<div style="width: 2200px;">
		<div style="width: 100%;height: 100px;padding-top: 20px;">
			<el-input-number style="width: 200px;" v-model="location.size"/>米
			<el-button type="primary" @click="changeSize()" >确定</el-button>
			
			<el-button type="primary" @click="addAdress()" >添加</el-button>
		</div>
		<div style="width: 2000px;height: 100%;">
		
			<div style="float: left;height: 100%;margin-right: 50px;">
				<iframe id="mapPage" width="400px" height="100%" frameborder=0
				    src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=CFKBZ-VR63P-Z35DK-L4WJM-WQF2J-SGB52&referer=myapp">
				</iframe> 
			</div>
			<div id="container" style="width:800px; height:100%;float: left;"></div>
		</div>
	</div>
</template>


<script>

	import {
		defineComponent,
		reactive,
		onMounted,
		ref
	} from 'vue'

	export default defineComponent({
         
        props:['show'],

		setup(props,ctx) {
			
			let location = reactive({
	             address:null ,
				 size:1000	
			})
             
			

		   
			onMounted(() => {
				console.log("init>>>");
				//window.onload = loadMap
				//iniwindow.window.TMap()
				loadMap()
				
				 window.addEventListener('message', function(event) {
				        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
				        var loc = event.data;
				        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
				          console.log('location', loc);
						  location.address=loc
						  map.setCenter(new window.TMap.LatLng(loc.latlng.lat,loc.latlng.lng))
						  changeSize()
				        }
				    }, false);
			})
			
			const maps=reactive({			
				lat:39.984104,
				lng:116.307503
			})
			let map = ref(null)
			let circle = ref(null )
			const loadMap = () => {
				
				
				
				
				 map = new window.TMap.Map("container", {
				  zoom: 12, //设置地图缩放级别
				  center: new window.TMap.LatLng(maps.lat, maps.lng) //设置地图中心点坐标
				});
				
				//创建圆形覆盖物
				 circle = new window.TMap.MultiCircle({ 
				  map,
				  styles: { // 设置圆形样式
					'circle': new window.TMap.CircleStyle({
					  'color': 'rgba(41,91,255,0.16)',
					  'showBorder': true,
					  'borderColor': 'rgba(41,91,255,1)',
					  'borderWidth': 2,
					}),
				  },
				  geometries: [{
					styleId: 'circle',
					center: map.getCenter(), //圆形中心点坐标 
					radius: location.size,	//半径（单位：米）
				  }],
				});
					
					// var clickHandler=function(evt){
					//     var lat = evt.latLng.getLat().toFixed(6);
					//     var lng = evt.latLng.getLng().toFixed(6);
					// 	//circle.setCenter(lat,lng)
					// 	map.setCenter(new window.TMap.LatLng(lat,lng))
					//     console.log("您点击的的坐标是："+ lat + "," + lng);
						// circle.setGeometries(
						// [{
						// 					styleId: 'circle',
						// 					center: map.getCenter(), //圆形中心点坐标 
						// 					radius: size.value,	//半径（单位：米）
						// }])
					// }
					// //Map实例创建后，通过on方法绑定点击事件
					// map.on("click",clickHandler)
				
			}
           
			
			const changeSize= ()=>{
				let n = parseInt(location.size)
				circle.setGeometries(
				[{
									styleId: 'circle',
									center:map.getCenter(), //圆形中心点坐标 
									radius: n	//半径（单位：米）
				}])
			}
			const addAdress =()=>{
				ctx.emit('changeLocaltion',location);
			}
			return {

                location,
				changeSize,
				addAdress
				


			};
		}
	})
</script>
<style scoped lang="scss">
	.mapBox {
		position: relative;

		.mapBtn {
			position: absolute;
			bottom: 20px;
			right: 20px;
			z-index: 999;
		}

	}
</style>
